<template>
  <div class="recordDetail">
    <Navbar :appTitle="title"  @eventGetHeight="getHeight"/>
    <!--头部-->
    <div class="d-head" id="headdd" style="position:fixed;top:0;z-index: 990;">
      <div class="content">
        <div class="left">
          <div class="title">{{ detailInfo.customerFullName }}</div>
          <div class="row">
            <span class="r-label">客户编号：</span>
            <span class="r-column">{{ detailInfo.customerCode || "--" }}</span>
          </div>
          <div class="row">
            <span class="r-label">客户简称：</span>
            <span class="r-column">{{
              detailInfo.customerShortName || "--"
            }}</span>
          </div>
          <div class="status">{{ detailInfo.effectStatusText }}</div>
        </div>
        <!-- ids="ERP_CUSTOMER" -->
        <imgStatus
          :flowStatus="detailInfo.flowStatus"
        ></imgStatus>
      </div>
    </div>
    <!-- taps-->

      <van-tabs v-model="active" scrollspy sticky :offset-top="154">
        <!--基本信息 -->
        <van-tab
          v-if="detailInfo.isInputInvoice == 'yes'"
          :style="calssDD"
          title="开票信息55"
        >
          <div class="otherTaps">
            <div class="title">
              <span class="content">开票信息</span>
            </div>
            <div class="content">
              <div class="row">
                <span class="r-label" >纳税人识别号：</span
                >
                <span class="r-column">{{
                  detailInfo.taxDiscernNum || "--"
                }}</span>
              </div>
              <div class="row">
                <span class="r-label">地址：</span>
                <span class="r-column">{{ detailInfo.address || "--" }}</span>
              </div>
              <div class="row">
                <span class="r-label">电话：</span>
                <span class="r-column">{{ detailInfo.phone || "--" }}</span>
              </div>
              <div class="row">
                <span class="r-label">开户行：</span>
                <span class="r-column">{{ detailInfo.bankName || "--" }}</span>
              </div>
              <div class="row">
                <span class="r-label">账号：</span>
                <span class="r-column">{{
                  detailInfo.accountNumber || "--"
                }}</span>
              </div>
            </div>
          </div>
        </van-tab>
        <!--客户联系人 -->
        <div
          v-if="
            detailInfo.isInputContacts == 'yes' &&
            detailInfo.isInputInvoice == 'no'
          "
          :style="calssDD"
        ></div>
        <van-tab v-if="detailInfo.isInputContacts == 'yes'" title="客户联系人">
          <div
            v-for="(item, index) in detailInfo.erpCustomerContactInfoVoList"
            :key="index"
          >
            <div class="otherTaps">
              <div class="title">
                <span class="content"
                  >客户联系人（{{
                    detailInfo.erpCustomerContactInfoVoList.indexOf(item) + 1
                  }}）</span
                >
              </div>
              <div class="content">
                <div class="row">
                  <span class="r-label">姓名：</span>
                  <span class="r-column">{{ item.contactName || "--" }}</span>
                </div>
                <div class="row">
                  <span class="r-label">职务：</span>
                  <span class="r-column">{{ item.contactPost || "--" }}</span>
                </div>
                <div class="row">
                  <span class="r-label">电话：</span>
                  <span class="r-column">{{ item.contactPhone || "--" }}</span>
                </div>
                <div class="row">
                  <span class="r-label">邮箱：</span>
                  <span class="r-column">{{ item.contactEmail || "--" }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <!--其它 -->
        <div
          v-if="
            detailInfo.isInputContacts == 'yes' &&
            detailInfo.isInputInvoice == 'yes'
          "
          style="height: 0.1rem; background: #f5f5f5"
        ></div>
        <div
          v-if="
            detailInfo.isInputContacts == 'no' &&
            detailInfo.isInputInvoice == 'no'
          "
          :style="calssDD"
        ></div>
        <van-tab title="其它">
          <div class="otherTaps">
            <div class="title">
              <span class="content">其它</span>
            </div>
            <div class="content">
              <div class="row">
                <span class="r-label">客户经理：</span>
                <span class="r-column">{{
                  detailInfo.belongUserIdText || "--"
                }}</span>
              </div>
              <div class="row">
                <span class="r-label">附件：</span>
                <span class="r-column">
                  <upload
                    class="fileclass"
                    iconType="fj"
                    :fileIds="detailInfo.attachment"
                    :showUpload="false"
                  ></upload>
                </span>
              </div>
            </div>
          </div>
        </van-tab>
        <!--审批流程 -->
        <!-- <div v-if="shows" class="otherMargin"></div> -->
        <van-tab v-if="detailInfo.flowInstId" title="审批流程" >
          <div v-if="detailInfo.flowInstId">
            <!-- ids="ERP_CUSTOMER" -->
            <Examine
              type="2"
              :id="detailInfo.flowInstId"
              ref="examine"
            />
          </div>
        </van-tab>
      </van-tabs>
      <div class="ExamineBottom"></div>

    <!--提交按钮 -->
    <div v-if="$route.query.applyType == 'waiterDeal'" class="search-bottom">
      <span class="btncancel" @click="cancel">拒绝</span>
      <span class="btnconfirm" @click="confirm">同意</span>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { APILX } from "@/api/requestLx";
import imgStatus from "@/components/imgStatus/imgStatus";
import Examine from "@/components/examine";
import { getEnableOne } from "@/api/api";
import upload from "@/components/upload/upload";
export default {
  name: "customerDetail", //客户详情
  components: { Navbar, upload, Examine, imgStatus },
  data() {
    return {
      bodyHeight: "",
      runingHeight: "",
      bottomHeight: "padding-bottom:1.5rem",
      calssDD: "",
      active: 0,
      shows: false, //是否开启了审批
      active: 0,
      detailInfo: {},
      title: this.$route.meta.title,
      fileIds: "",
      tabsNum: 4
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.getDetail();
    this.isApproval();
    // 判断是否从审批过来
    this.getEnableOne();
  },
  methods: {
     bottomOtherHeightCheck() {
      if (this.shows) {
        return "";
      } else {
        console.log(this.bodyHeight,'this.bodyHeight');
        if (this.bodyHeight < 736) {
          return "padding-bottom:3.5rem";
        }
        if (this.bodyHeight >= 736 && this.bodyHeight < 812) {
          return "padding-bottom:3.5rem";
        }
        if (this.bodyHeight >= 812 && this.bodyHeight < 896) {
          console.log('812');
          return "padding-bottom:4.5rem";
        }
        if (this.bodyHeight >= 896) {
          return "padding-bottom:4.5rem";
        }
      }
    },
    getHeight(data) {
      this.bodyHeight = document.body.clientHeight; //屏幕高度
      if (this.bodyHeight >= 736) {
        this.bottomHeight = "padding-bottom:2rem";
      }
      if (this.bodyHeight >= 812) {
        this.bottomHeight = "padding-bottom:2.5rem";
      }
      if (this.bodyHeight >= 896) {
        this.bottomHeight = "padding-bottom:3rem";
      }
      this.runingHeight =
        data + document.getElementById("headdd").offsetHeight -30;
      this.calssDD = "margin-top:" + (this.runingHeight - 90 ) + "px";
    },
    //   判断是否开启审批
    getEnableOne() {
      getEnableOne({ id: "ERP_CUSTOMER", type: "add" }).then((res) => {
        if (res.result && res.result == "false") {
          this.shows = false;
          this.tabsNum -= 1
        } else {
          this.shows = true;
        }
      });
    },
    // 判断是否从审批过来
    isApproval() {
      if (localStorage.getItem("approval") === "success") {
        let paramsObj = {
          applyType: "waiterDeal",
        };
        let pathUrl = "/waiterApply";
        this.$router.push({
          path: pathUrl,
          query: paramsObj,
        });
      }
      localStorage.removeItem("approval");
    },
    // 获取详情
    getDetail() {
      let id = this.$route.query.id;
      //   let id = "1516313635524386817"; //无客户联系人 无开票信息
      //   let id = "1515960651187691521"; //都有
      //   let id = "1516312541968670722"; //有开票信息
      // let id = "1516313026691801090"; //有客户联系人
      APILX.erpCustomerQueryById(id).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result;
          if (this.detailInfo.isInputInvoice == 'no') {
            this.tabsNum -= 1
          }
          if (this.detailInfo.isInputContacts == 'no') {
            this.tabsNum -= 1
          }
        } else {
          this.$toast(res.result);
        }
      });
    },
    cancel() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 0, taskId: this.$route.query.taskId},
      });
    },
    confirm() {
      console.log(this.$route.query.taskId,'this.$route.query.taskId;');
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 1, taskId: this.$route.query.taskId },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/views/workManagement/materialRequisition/materialDetail.scss";
.content {
  margin-left: 0 !important;
}
.van-tabs-wraper {
  /deep/ .van-tabs__line{
  left: -1.56rem;
}
/deep/.van-tab{
  justify-content: flex-start;
  padding-left: 0.2rem
}
}
/deep/ .van-tab__pane{
  margin-top: 0.1rem !important;
}
/deep/ .van-tabs__content{
  margin-top: 122px !important;
}
</style>
